<template>
  <div>
    <el-dialog
        title="添加角色"
        :visible.sync="dialogVisible"
        width="30em"
        :before-close="handleClose">
        <el-form :model="roles" :rules="rules" ref="roleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="角色名称" prop="roleName">
                <el-input v-model="roles.roleName"></el-input>
            </el-form-item> 
            <el-form-item label="角色描述" prop="roleDesc">
                <el-input v-model="roles.roleDesc"></el-input>
            </el-form-item> 
        </el-form>
        <span slot="footer" class="dialog-footer">
                <el-button @click="offuser">取 消</el-button>
                <el-button type="primary" @click="yesUser">确 定</el-button>
            </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
    name:'addRole',
    data() {
        return {
            roles:{
                roleName:'',
                roleDesc:'',
            },
            //防止失败的时候重复点击确定按钮
            num1:true,
            rules:{
                roleName: [
                { required: true, message: '请输入角色名称', trigger: 'blur' },
                { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
                ],  
                roleDesc: [
                    { required: true, message: '请输入角色描述', trigger: 'blur' },
                    { min: 4, max: 15, message: '长度在 4 到 15 个字符', trigger: 'blur' }
                ],
            }
        };
    },
methods:{
    //点击关闭按钮执行的函数
    handleClose(){
        this.$refs.roleForm.resetFields()
        this.offUser()
    },
    //关闭模态框
    offuser(){
        //清空表单
        this.$refs.roleForm.resetFields()
        //关闭模态框
        this.offUser()
    },
    // 点击确定按钮
    yesUser(){
        //节流阀
        if(this.num1){
            this.num1 = false
            setTimeout(() => {
                this.num1 = true
            }, 2000);
            this.$refs.roleForm.validate((valid) => {
            if (valid) {
                this.$http({
                    method:'POST',
                    url:'roles',
                    //需要传递的参数
                    data:this.roles
                }).then(
                respose => {//正确请求时执行的代码
                    if (respose.data.meta.status!=201) {//添加失败
                        // console.log(respose.data.meta.status)
                        this.$message({
                        message: '添加失败,'+respose.data.meta.msg,
                        type: 'error',
                        showClose: true,
                        duration:4000
                        })
                    }
                    else{//添加成功
                        console.log(respose.data)
                        this.$message({
                            message: '添加用户成功',
                            type: 'success',
                            duration:2000
                        })
                          // console.log(this.users);
                        this.offuser()
                        this.getRolessList()
                    }   
                },
                error => {//错误时执行的代码
                    console.log(error.code);
                    this.$message({
                        message: '添加失败'+ error.code,
                        type: 'error',
                        duration:2500
                    })
                },
                )
            }
        })
        }
       
        
    },
},
props:['offUser','dialogVisible','getRolessList']
}
</script>

<style>

</style>